<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>区域设置</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/default.css">	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
	<script type="text/javascript">
		function doAdd(){
			$('#addRegionWindow').window("open");
		}

		function doView(){
			alert("修改...");
		}

		function doDelete(){
			alert("删除...");
		}


		//工具栏
		var toolbar = [ {
			id : 'button-edit',
			text : '修改',
			iconCls : 'icon-edit',
			handler : doView
		}, {
			id : 'button-add',
			text : '增加',
			iconCls : 'icon-add',
			handler : doAdd
		}, {
			id : 'button-delete',
			text : '删除',
			iconCls : 'icon-cancel',
			handler : doDelete
		}, {
			id : 'button-import',
			text : '导入',
			iconCls : 'icon-redo',
		}];
		// 定义列
		var columns = [ [ {
			field : 'id',
			checkbox : true,
		},{
			field : 'province',
			title : '省',
			width : 120,
			align : 'center'
		}, {
			field : 'city',
			title : '市',
			width : 120,
			align : 'center'
		}, {
			field : 'district',
			title : '区',
			width : 120,
			align : 'center'
		}, {
			field : 'postcode',
			title : '邮编',
			width : 120,
			align : 'center'
		}, {
			field : 'shortcode',
			title : '简码',
			width : 120,
			align : 'center'
		}, {
			field : 'citycode',
			title : '城市编码',
			width : 200,
			align : 'center'
		} ] ];

		$(function(){
			// 先将body隐藏，再显示，不会出现页面刷新效果
			$("body").css({visibility:"visible"});

			// 收派标准数据表格
			$('#grid').datagrid( {
				method :'GET',
				iconCls : 'icon-forward',
				fit : true,
				border : false,
				rownumbers : true,
				striped : true,
				pageList: [30,50,100],
				pagination : true,
				toolbar : toolbar,
				url : "${pageContext.request.contextPath}/RegionPageQuery",
				idField : 'id',
				columns : columns,
				pageNumber : ${sessionScope.regionPage==null?1:sessionScope.regionPage} ,
				pageSize : ${sessionScope.regionRows==null?30:sessionScope.regionRows} ,
				onDblClickRow : doDblClickRow
			});

			//工具栏加载完成，调用upload方法
			$("#button-import").upload({
				name : 'regionfile',
				action :'${pageContext.request.contextPath}/importRegionFile',
				onComplete : function (data) {
					if (data == 'ok'){
						//ocUpload是不会刷新页面的，他刷新的是隐藏的iframe，想要刷新显示页面那就得重新载入
						window.location.reload();
					}
				},
				onSelect: function() {//当用户选择了一个文件后触发事件
					//当选择了文件后，关闭自动提交
					this.autoSubmit=false;
					//校验上传的文件名是否满足后缀为.xls或.xlsx
					var regex =/^.*\.(?:xls|xlsx)$/i;
					if(regex.test(this.filename())){
						//通过校验
						this.submit();
					}else{
						//未通过
						$.messager.alert("错误","选择的文件不是excel文件","error");
					}
				}
			})

			// 添加、修改区域窗口
			$('#addRegionWindow').window({
				title: '添加修改区域',
				width: 400,
				modal: true,
				shadow: true,
				closed: true,
				height: 400,
				resizable:false
			});

		});

		function doDblClickRow(){


			alert("双击表格数据...");
		}
	</script>
	<script
	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>
	<script
	src="${pageContext.request.contextPath }/js/plugin/jquery.ocupload-1.1.2.js"
	type="text/javascript"></script>
</head>
<body class="easyui-layout" style="visibility:hidden;">
	<div region="center" border="false">
    	<table id="grid"></table>
	</div>
	<div class="easyui-window" title="区域添加修改" id="addRegionWindow" collapsible="false" minimizable="false" maximizable="false" style="top:20px;left:200px">
		<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
			<div class="datagrid-toolbar">
				<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
			</div>
		</div>
		
		<div region="center" style="overflow:auto;padding:5px;" border="false">
			<form>
				<table class="table-edit" width="80%" align="center">
					<tr class="title">
						<td colspan="2">区域信息</td>
					</tr>
					<tr>
						<td>省</td>
						<td><input type="text" name="province" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>市</td>
						<td><input type="text" name="city" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>区</td>
						<td><input type="text" name="district" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>邮编</td>
						<td><input type="text" name="postcode" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>简码</td>
						<td><input type="text" name="shortcode" class="easyui-validatebox" required="true"/></td>
					</tr>
					<tr>
						<td>城市编码</td>
						<td><input type="text" name="citycode" class="easyui-validatebox" required="true"/></td>
					</tr>
					</table>
			</form>
		</div>
	</div>
</body>
</html>